<template>
  <d2-container :class="{'page-compact':crud.pageOptions.compact}">
    <d2-crud-x
      ref="d2Crud"
      v-bind="_crudProps"
      v-on="_crudListeners"
      @add-sub-resource="handleAddSubResource"
    >

      <div slot="header">
        <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch"/>
        <el-button slot="header" v-permission="'permission:resource:add'" size="small" type="primary"
                   @click="addRootRow"><i class="el-icon-plus"/> 新增
        </el-button>

<!--        <crud-toolbar :search.sync="crud.searchOptions.show"-->
<!--                      :compact.sync="crud.pageOptions.compact"-->
<!--                      :columns="crud.columns"-->
<!--                      @refresh="doRefresh()"-->
<!--                      @columns-filter-changed="handleColumnsFilterChanged"/>-->
      </div>

    </d2-crud-x>
  </d2-container>
</template>

<script>
import {crudOptions} from './crud'
import {d2CrudPlus} from 'd2-crud-plus'
import {GetPage, AddObj, UpdateObj, DelObj, GetObj} from './api'
import foreach from 'lodash.foreach'
import {request} from '@/api/service'

export default {
  name: 'Category',
  mixins: [d2CrudPlus.crud],
  data() {
    return {
      treeIdMap:{},
      treeId: null,
      treeNode:null,
      treeResolve: null
    }
  },
  methods: {
    loadTree(id, treeNode, resolve) {
      this.treeIdMap[id] = {
        node: treeNode,
        resolve
      }
      request({
        url: '/category/children',
        method: 'get',
        params: {id: id}
      }).then(ret => {
        console.log('懒加载数据', ret.data)
        resolve(ret.data)
      })
    },
    getCrudOptions() {
      return crudOptions(this)
    },
    doAfterRefresh(query, options) {
      // alert(this.treeId)
      if(this.treeId) {
        let obj = this.treeIdMap[this.treeId];
        if(obj) {
          this.loadTree(this.treeId, obj.node, obj.resolve);
        }
      }
    },
    pageRequest(query) {
      return GetPage(query).then(ret => {
        const list = ret.data.records
        ret.data = {
          current: 1,
          size: 10000,
          total: 100,
          records: list
        }
        setTimeout(() => { // 注意：有风险，当后台返回数据很快，并且列表复杂渲染速度很慢，this.getD2Crud().$refs.elTable会报空指针异常
          const data = this.getD2Crud().$refs.elTable.store.states.treeData
          if (data != null) {
            foreach(data, (value, key) => {
              // 默认展开两层
              if (value.children && value.level <= 1) {
                value.expanded = true
              }
            })
          }
        }, 1)
        return ret
      })
    },
    clearResourceTreeDictCache() {
      d2CrudPlus.util.dict.clear('/permission/manager/resource/tree')
    },
    addRequest(row) {
      this.treeId = row.pid
      return AddObj(row)
    },
    updateRequest(row) {
      this.treeId = row.pid
      this.clearResourceTreeDictCache()
      return UpdateObj(row)
    },
    delRequest(row) {
      this.treeId = row.pid
      return DelObj(row.id)
    },
    infoRequest(row) {
      return GetObj(row.id)
    },
    handleAddSubResource({index, row}) {
      this.addRow({pid: row.id})
    },
    addRootRow() {
      this.addRow({pid: 0})
    }
  }
}
</script>
